<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%--代表HTML5--%>
<!DOCTYPE html>
<html>
<%--Header Begin--%>
<head>
    <title>Hotel | 酒店</title>
    <jsp:include page="../../../includes/header.jsp"/>
    <link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
</head>

<body class="skin-blue layout-top-nav" style="height: auto; min-height: 100%;">

<div class="wrapper" style="height: auto; min-height: 100%;">

    <jsp:include page="../../../includes/top_navigation_reception.jsp"/>

    <!-- Full Width Column -->
    <div class="content-wrapper" style="min-height: 471px;">
        <div class="container">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <br>
                <h1>
                    酒店 | Hotel
                    <small>最新发布</small>
                </h1>
                <ol class="breadcrumb">
                    <br>
                    <li><a href="/hotel/index"><i class="fa fa-dashboard"></i>酒店</a></li>
                    <li><a href="#">Hotel</a></li>

                </ol>

            </section>
            <br>
            <section>
                <div class="container">
                    <div class="col-lg-10"></div>
                    <div class="box-tools col-lg-2">
                        <form action="/hotel/hotelPointSearch" method="get">
                            <div class="input-group input-group-sm" style="width: 150px;">

                                <input type="text" name="keyword" class="form-control pull-right"
                                       placeholder="酒店搜索...">

                                <div class="input-group-btn">
                                    <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
            <br>
            <br>
            <!-- ROOM -->
            <section class="section-room bg-white">
                <div class="layui-btn-container" style="text-align: right">
                    <button class="layui-btn layui-btn-primary demo-dropdown-base">
                        <span id="ByName">人气</span>
                        <i class="layui-icon layui-icon-down layui-font-12"></i>
                    </button>
                </div>
                <div class="row">

                    <c:forEach items="${hotels}" var="hotel">
                        <!-- ITEM -->
                        <div class="col-lg-1"></div>
                        <div class="col-sm-6 col-md-4 col-lg-5">
                            <div class="thumbnail" style="height: 450px;">
                                <a href="/hotel/content?hid=${hotel.hid}">
                                        <%--<img src="${viewPoint.tpVpic}" alt="..." class="img-rounded">--%>
                                    <img src="${hotel.imgUrl}" alt="...">
                                </a>
                                <div class="caption">
                                    <h3>${hotel.title}</h3>
                                    <ol>
                                        <li><p style="color: #ffa309">
                                            城市：${hotel.local}|房屋类型：${hotel.houseType}|床类型：${hotel.bedType}</p>
                                        </li>
                                        <li><p style="color: #0b93d5">价格：￥${hotel.price} |
                                            详细地址：${hotel.zip}</p></li>
                                    </ol>
                                </div>
                                <div class="form-group" style="text-align: right;">
                                    <a class="btn" style="color: #0b97c4"
                                       href="/hotel/content?hid=${hotel.hid}">查看详情»</a>
                                </div>
                            </div>
                        </div>
                        <!-- END / ITEM -->
                    </c:forEach>
                    <div id="demo-laypage-normal-1" style="float: right;">内容</div>

                </div>
            </section>
            <!-- /.container -->
        </div>
        <!-- /.content-wrapper -->
    </div>
    <%--版权--%>
    <jsp:include page="../../../includes/copyright.jsp"/>
    <!-- ./wrapper -->
    <%--js--%>
    <jsp:include page="../../../includes/footer.jsp"/>
    <script src="//unpkg.com/layui@2.9.7/dist/layui.js"></script>
    <script>
        layui.use(function () {
            var dropdown = layui.dropdown;
            // 渲染
            dropdown.render({
                elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
                data: [{
                    title: '人气',
                    data: "heat"
                }, {
                    title: '评论数',
                    data: "comment"
                }],
                click: function (obj) {
                    // 获取跳转链接
                    // 执行页面跳转
                    window.location.href = "${pageContext.request.contextPath}/hotel/index?orderBy=" + obj.data + "&ByName=" + obj.title;
                }
            });
            var laypage = layui.laypage;

            // 获取地址栏中特定参数的值
            function getPageParameter(parameterName) {
                var searchParams = new URLSearchParams(window.location.search);
                return searchParams.get(parameterName);
            }

            // 普通用法
            laypage.render({
                elem: 'demo-laypage-normal-1',
                curr: getPageParameter('page') || 1, // 设置默认起始页1
                count: 50, // 数据总数
                jump: function (obj, first) {
                    <%--    alert(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。--%>
                    <%--    alert(obj.limit); // 得到每页显示的条数--%>

                    // 首次不执行
                    if (!first) {
                        // do something
                        // 拼接新的 URL，包含页码参数
                        var url = window.location.pathname + '?page=' + obj.curr;
                        // 页面跳转
                        window.location.href = url;
                    }
                }
            });
        });


    </script>
    <script>
        // 获取 URL 参数的函数
        function getUrlParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        // 获取名为 category 的参数值
        var categoryValue = getUrlParam('ByName');
        if (categoryValue != null) {
            // 将参数值设置为 span 元素的文本内容
            document.getElementById('ByName').innerText = categoryValue;
        }

    </script>
</body>
</html>